<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="content">{{ barTitle }}</block>
		</cu-custom>
		
		<tm-message ref="toast"></tm-message>
		
		<view v-if="article">
			<view style="background-color: #FFFFFF;padding: 20rpx 20rpx 20rpx 20rpx;">
				<!-- <view class="titleBox articleTitle text-black text-bold">{{ article.articleTitle }}</view> -->
				<block>
					<!--  @click="goMedal" -->
					<view class='flex align-center'>
						<view class="author-avatar" style="overflow: hidden;">
							<image :src="article.author.avatar" style="width: 40px; height: 40px;border-radius: 50%;">
							</image>
						</view>
						<view class="padding text-blue text-xl text-bold">
							{{ article.author.nickname }}
						</view>
					</view>
				</block>

				<view class="flex justify-between align-center text-df text-gray margin-top-sm margin-bottom-sm">
					<text>{{article.categoryName}}</text>
					<text>{{article.createTime | formatDate}}</text>
					<view v-if="wordNum" class="lynhng-icon li-wordNum">{{ wordNum }}</view>
					<view v-if="readTime" class="lynhng-icon li-readTime">{{readTime }}</view>
				</view>
				<!-- 文章标签 -->
				<view v-if="article.tags" class="flex align-center margin-top-sm margin-bottom-sm">
					<tm-tags model="text" v-for="item in article.tags">{{ item.tagName }}</tm-tags>
				</view>
				<!-- 封面 -->
				<image mode="widthFix" v-if="article.articleCover" :src="article.articleCover"></image>

				<!-- 文章区域 -->
				<view class="contentBox text-lg text-black margin-top-sm margin-tb-lg">
					<ua-markdown :source="article.articleContent" />
				</view>
			</view>

			<view style="background-color: #FFFFFF;padding: 15rpx;margin-top: 20rpx;">
				<!-- 图片展示 · 多条 -->
				<!-- <image @click="previewImage(index)" v-for="(item, index) in newsData.imgList.split(',')" :key="index"
					mode="widthFix" :src="item"></image> -->

				<!-- 浏览、点赞、分享数 -->
				<view class="text-right text-df text-gray margin-top-sm margin-bottom-sm">
					<text class="text-gray cuIcon-attentionfill text-df" style="margin-right: 6rpx;"></text>
					<text class="text-df margin-right-sm" style="margin-top: 2rpx;">{{article.viewCount}}</text>
					<text class="text-gray cuIcon-appreciatefill text-df" style="margin-right: 6rpx;"></text>
					<text class="text-df margin-right-sm" style="margin-top: 2rpx;">100</text>
					<text class="text-gray cuIcon-share text-df" style="margin-right: 6rpx;"></text>
					<text class="text-df" style="margin-top: 2rpx;">10</text>
				</view>
			</view>
		</view>

		<!-- 上一篇 -->
		<view v-if="preArticle" class="margin-top-sm" style="padding: 10rpx 10rpx;">
			<view class="text-size-lg text-weight-b blue text flex lynhng-icon li-pre">上一篇</view>
			<view class="text-size-xs">
				<view class="cu-card article no-card">
					<view class="cu-item shadow borderBottom" @click="handleArticleDetail(preArticle.id)">
						<view class="title">
							<view class="text-cut text-bold text-lg">{{ preArticle.articleTitle }}</view>
						</view>
						<view class="content">
							<!-- 封面 -->
							<image v-if="preArticle.articleCover" :src="preArticle.articleCover" mode="aspectFit">
							</image>
							<view class="desc">
								<view class="text-content">{{ preArticle.articleContent }}</view>
								<view class="margin-top-xs"
									style="display: flex;align-items:center;justify-content: space-between;">
									<view class="text-gray light sm text-df round fl">
										{{preArticle.createdTime | formatDate}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 下一篇 -->
		<view v-if="nextArticle" class="margin-top-sm" style="padding: 10rpx 10rpx;">
			<view class="text-size-lg text-weight-b blue text flex align-center" style="justify-content: flex-end;">下一篇
				<view class="lynhng-icon li-next"></view>
			</view>
			<view class="text-size-xs">
				<view class="cu-card article no-card">
					<view class="cu-item shadow borderBottom" @click="handleArticleDetail(nextArticle.id)">
						<view class="title">
							<view class="text-cut text-bold text-lg">{{ nextArticle.articleTitle }}</view>
						</view>
						<view class="content">
							<!-- 封面 -->
							<image v-if="nextArticle.articleCover" :src="nextArticle.articleCover" mode="aspectFit">
							</image>
							<view class="desc">
								<view class="text-content">{{ nextArticle.articleContent }}</view>
								<view class="margin-top-xs"
									style="display: flex;align-items:center;justify-content: space-between;">
									<view class="text-gray light sm text-df round fl">
										{{nextArticle.createdTime | formatDate}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- background-color: #FFFFFF -->
		<view style=";padding: 0rpx 30rpx 15rpx 0rpx;margin: 25rpx 0 100rpx 0;">
			<!-- <view class="cu-bar justify-left bg-white">
				<view class="action border-title">
					<text class="text-lg text-bold text-blue">评论</text>
					<text class="bg-gradual-blue" style="width:3rem"></text>
				</view>
			</view> -->

			<!-- <view class="text-lg text-bold text-center margin-bottom-lg">到底了~</view> -->

			<!-- view class="cu-list menu-avatar comment solids-top">
				<view class="cu-item">
					<view class="cu-avatar round" style="background-image:url(https://cdn.zhoukaiwen.com/logo.png);">
					</view>
					<view class="content">
						<view class="text-grey">凯文童鞋</view>
						<view class="text-gray text-content text-df">
							评论功能暂未开启哦～
						</view>
						<view class="margin-top-xs flex justify-between">
							<view class="text-gray text-df">2021-12-05 09:46</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>

		<!-- <view class="cu-bar bg-white tabbar border shop bottomBox">
			<button class="action" open-type="share" @click="shareFun">
				<view class="cuIcon-share text-green">
					<view class="cu-tag badge">{{newsData.commentNum}}</view>
				</view>
				分享
			</button>
			<button class="action" open-type="contact">
				<view class="cuIcon-service text-green">
					<view class="cu-tag badge"></view>
				</view>
				联系我们
			</button>
			<view class="btn-group">
				<button style="width: 80%;height: 70rpx;" @click="praiseClick(newsData.id)"
					class="cu-btn bg-gradual-blue round shadow-blur">
					<view class="cuIcon-appreciatefill text-white margin-right-xs"></view>
					赞一下吧
				</button>
			</view>
		</view> -->
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<!-- 文章详情 -->
<script>
	import request from '@/common/request.js';
	import {
		getArticleById
	} from '@/api/article/article.js';

	export default {
		data() {
			return {
				barTitle: '文章',
				newsData: [],
				article: null,
				preArticle: null,
				nextArticle: null,
				wordNum: null,
				readTime: null,
				requestStatus: false // 事件防抖
			}
		},
		onLoad(option) {
			if (option.id) {
				this.getData(option.id);
			} else {
				this.getData(173)
			}
		},
		// onShareTimeline() {
		// 	return {
		// 		title: '「前端铺子」技术 # 案例 # 学习 # 提升，开发者者的聚集地！',
		// 		imageUrl: 'https://cdn.zhoukaiwen.com/qdpz_share.jpg',
		// 	}
		// },
		methods: {
			async getData(id) {
				uni.showLoading({
					title: '加载中'
				});
				await getArticleById(id).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						console.log(res.data)
						this.barTitle = res.data.articleTitle
						this.article = res.data;
						if (res.data.preArticleCard) {
							this.preArticle = res.data.preArticleCard
						}
						if (res.data.nextArticleCard) {
							this.nextArticle = res.data.nextArticleCard
						}
						this.wordNum = Math.round(this.deleteHTMLTag(res.data.articleContent).length / 100) /
							10 + 'k';
						this.readTime = Math.round(this.deleteHTMLTag(res.data.articleContent).length / 400) +
							'mins';
					} else {
						this.$refs.toast.show({
							model: 'error'
						})
					}
				})
			},
			deleteHTMLTag(content) {
				return content
					.replace(/<\/?[^>]*>/g, '')
					.replace(/[|]*\n/, '')
					.replace(/&npsp;/gi, '')
			},
			// 点赞
			praiseClick(id) {
				this.$refs.toast.show({
					model: 'load'
				});
				console.log(id);
				if (this.requestStatus) { // 时间防抖：利用 return 终止函数继续运行
					return false;
				};
				this.requestStatus = true;
				uni.showLoading({
					title: '加载中'
				});
				let opts = {
					url: 'api/blog/like?id=' + id,
					method: 'get'
				};
				request.httpRequest(opts).then(res => {
					console.log(res);
					uni.hideLoading();
					if (res.data.code == 200) {
						this.newsData.likesNum++;
						uni.showToast({
							title: '点赞成功！感谢参与',
							duration: 2000
						});
						setTimeout(() => {
							// 模拟执行完毕，改变 requestStatus
							this.requestStatus = false;
						}, 2500);
					} else {
						console.log('数据请求错误～');
					}
				});
			},
			handleArticleDetail(id) {
				uni.redirectTo({
					url: '../article/detail?id=' + id,
				})
			},
			previewImage(index) {
				// 预览功能需要数组格式，具体查看uniapp文档：previewImage
				const seeImgList = this.newsData.imgList.split(',')
				uni.previewImage({
					current: index, //预览图片的下标
					urls: seeImgList //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			// 分享接口
			shareFun(id) {
				// console.log(this.$refs)
				// this.$refs.toast.show({model:'load'});
				console.log(id);
				// uni.showLoading({
				// 	title: '加载中'
				// });
				// let opts = {
				// 	url: 'api/blog/share?id=' + id,
				// 	method: 'get'
				// };
				// request.httpRequest(opts).then(res => {
				// 	console.log(res);
				// 	uni.hideLoading();
				// 	if (res.data.code == 200) {
				// 		this.newsData.commentNum++;
				// 	} else {
				// 		console.log('数据请求错误～');
				// 	}
				// });
			}
		},
		filters: {
			formatDate(value) {
				if (value == undefined) {
					return;
				}
				// let date = new Date(value * 1000);
				let date = new Date(value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				// return y + '-' + MM + '-' + d; //年月日
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m; //年月日时分秒
			}
		}
	}
</script>

<style lang="scss" scoped>
	.articleTitle {
		font-size: 30px;
	}

	.author-avatar {
		font-variant: small-caps;
		margin: 0;
		padding: 0;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		white-space: nowrap;
		position: relative;
		background-size: cover;
		background-position: center;
		vertical-align: middle;
		font-size: 1.5em;
	}

	button::after {
		border: none;
		background: transparent;
	}

	uni-button {
		background: transparent;
	}

	.container {
		background-color: #f2f2f2;
		width: 750rpx;

	}

	.solid {
		border-radius: 50rpx;
		text-indent: 12rpx;
	}

	image {
		width: 750rpx;
	}

	.bottomBox {
		width: 750rpx;
		position: fixed;
		left: 0;
		bottom: 0rpx;
	}
</style>